<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="w-full h-full">
    <view
      class="top-title mt-34rpx mb-34rpx ml-34rpx flex text-center justify-between"
      style="height: 70rpx; line-height: 70rpx"
    >
      <h2>故事板</h2>
      <view class="mr-40rpx color-[#9f9f9f]">查看全部 ></view>
    </view>
    <view class="card-swiper">
      <wd-swiper
        autoplay
        value-key="url"
        v-model:current="current"
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        customItemClass="customItem-class"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :list="customSwiperList"
        previousMargin="24px"
        nextMargin="24px"
      ></wd-swiper>
      <view
        class="simpleDecription w-full h-20rpx mt-32rpx flex-center"
        style="font-weight: bold; font-size: 36rpx"
      >
        <view>{{ customSwiperList[current].title }}</view>
      </view>
    </view>

    <SrollHorizontalBox
      @current-item="getScrollHorizonClickItem"
      :goods-arr="goodsArr"
      @click-search-all-img="clickSearchAllImg"
    ></SrollHorizontalBox>
    <MyTabBar />
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'

import { ref } from 'vue'
import MyTabBar from '@/components/MyTabBar/MyTabBar.vue'
import { GoodsArr } from '@/types/indexModule/type'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const author = ref('菲鸽')
// 测试 uni API 自动引入
onLoad(() => {
  console.log(author)
})

const current = ref<number>(0)

const customSwiperList = ref([
  {
    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
    title: '小熊猫！',
  },
  {
    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
    title: '卡！皮！巴！拉！',
  },
  {
    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
    title: '大熊猫！',
  },
  {
    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
    title: '诗画中国！',
  },
])

const goodsArr = ref<GoodsArr[]>([
  {
    imgUrl:
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.6GI8s2Ds3GGIGqpq1X1x6AAAAA?w=251&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    contentTitle: '1',
  },
  {
    imgUrl:
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.6GI8s2Ds3GGIGqpq1X1x6AAAAA?w=251&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    contentTitle: '1',
  },
  {
    imgUrl:
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.6GI8s2Ds3GGIGqpq1X1x6AAAAA?w=251&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    contentTitle: '1',
  },
])
const getScrollHorizonClickItem = (item: GoodsArr) => {
  console.log(item)
}

const clickSearchAllImg = (data) => {
  const { code } = data
  if (code && code == 200) {
    uni.navigateTo({
      url: '/pages/type-detail/type-detail',
    })
  }
}
</script>

<style lang="scss">
@import url('uni.scss');

.main-title-color {
  color: #d14328;
}

.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 24rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding-bottom: 24rpx;

  :deep(.custom-indicator-class) {
    bottom: -16px;
  }

  :deep(.custom-image) {
    border-radius: 12rpx;
  }

  :deep(.custom-image-prev) {
    height: 168px !important;
  }

  :deep(.custom-indicator-class) {
    display: none;
  }
}
</style>
